@charset "utf-8";

/*rem转换函数(默认设置为40px)*/

@function torem($px) {
    @return $px / 50px * 1rem;
}


/*基础全局样式*/

html {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: torem(26px);
    color: #000;
    overflow: hidden;
}

a {
    color: #000;
    font-size: torem(16px);
    &:hover {
        color: orange;
    }
}

button {
    border: none;
}

img {
    vertical-align: top;
}


/*内容区布局*/

body {
    // background: url(../image/bg-tile.jpg) repeat-y;
}

.g-box {
    width: torem(750px);
    height: torem(4900px);
    background: url(../image/bg.jpg) no-repeat;
    background-size: contain;
    position: relative;
}

.g-bd {
    overflow: hidden;
    position: absolute;
    top: torem(790px);
    left: 0;
    .m-you {
        padding: 0 torem(14px);
        margin-top: torem(200px);
        li {
            float: left;
            margin: 0 torem(7px) torem(15px);
            padding: torem(26px) torem(16px) torem(32px) torem(16px);
            border: torem(1px) solid #7f7f7f;
            border-radius: torem(10px);
            background: #fff;
        }
        img {
            width: torem(192px);
            height: torem(192px);
        }
        .u-tit2 {
            width: torem(192px);
            height: torem(72px);
            margin-top: torem(7px);
            font-size: torem(26px);
            font-weight: normal;
            line-height: torem(36px);
            text-overflow: ellipsis;
            overflow: hidden;
            background: #fff;
        }
        .u-price {
            font-size: torem(24px);
            line-height: torem(64px);
            text-align: center;
            color: #f00;
            span {
                font-size: torem(28px);
                font-weight: bold;
                margin: 0 torem(5px);
            }
            em {
                font-size: torem(20px);
                color: #aaa;
                font-style: normal;
                text-decoration: line-through;
                margin: 0 torem(5px);
            }
        }
        button {
            width: torem(192px);
            height: torem(58px);
            background: #f00;
            color: #fff;
            text-align: center;
            line-height: torem(58px);
            font-size: torem(28px);
            border-radius: torem(10px);
        }
    }
    .g-rules {
        margin: torem(40px) torem(25px);
        height: torem(850px);
        position: relative;
        .rules-top {
            position: absolute;
            top: torem(-25px);
            left: torem(200px);
            width: torem(300px);
            height: torem(50px);
            border-radius: torem(25px);
            background: #fff;
            z-index: 1;
        }
        .m-rules {
            position: absolute;
            z-index: 2;
            background: #fff;
            padding: torem(0px) torem(30px);
            h2 {
                height: torem(60px);
                line-height: torem(60px);
                font-size: torem(30px);
                color: #1a18e4;
                text-align: center;
                border-bottom: torem(2px) dashed #666;
            }
            .rules-con {
                padding: torem(30px) 0;
                p {
                    font-size: torem(26px);
                    line-height: torem(34px);
                }
            }
        }
    }
}

.g-ft {
    position: absolute;
    top: torem(2628px);
    left: 0;
    width: torem(70px);
    height: torem(48px);
    background: url(../image/icon.png) no-repeat;
    background-size: contain;
}